<template>
  <el-dialog v-if="selectId && loginInfo.userId == 1300000000101" v-model="showConfigDailog" width="600px"
    height="300px" draggable :title="'选项配置: ' + selectId">
    <MkEditableTable :data="tableData" @add="addItem" @delete="deleteItem" max-height="500">
      <el-table-column label="选项">
        <template #default="{ row }">
          <el-input v-model="row.title"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="可否编辑">
        <template #default="{ row }">
          <el-switch v-model="row.canEdit" inline-prompt active-text="是" inactive-text="否" />
        </template>
      </el-table-column>
    </MkEditableTable>
    <template #footer>
      <slot name="footer">
        <el-button @click="reset"> 恢复默认选项 </el-button>
        <el-button @click="showConfigDailog = false"> 取 消</el-button>
        <el-button @click="submitConfig" type="primary"> 保 存</el-button>
      </slot>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
// MkSelectEdit 组件的选项配置, 只有管理员可以配置
import { getFormConfig, saveFormConfig, loginInfo } from '/@/stores/baseInfo/';
import { BasFormConfigOutput } from '/@/api/bas/BasFormConfig';
import MkEditableTable from '/@/componentsMaike/tables/MkEditableTable.vue';

defineOptions({
  name: 'SelectItemConfig4Edit'
})

// 外部入参选项格式
export interface OptionType {
  title: string,
  canEdit: boolean, // 是否可以编辑
}

const props = defineProps({
  selectId: {
    // 选择框的id, 用于缓存选项, 
    // 未设置selectId时, 不缓存选项, 
    // 如果两个MkSelect的selectId相同, 则会共享选项
    type: String,
  },
  options: { // 默认选项
    type: Array<OptionType>,
  },
})

const emits = defineEmits(['uploadOptions']);

const showConfigDailog = ref(false);
const tableData = ref([] as OptionType[]); // 用于编辑选项的表格

// 构造选项
onMounted(async () => {
  // props.options 是字符串数组,tableData 是对象数组: { label: item } , 所以先做个转换
  if (props.selectId) {
    let itemConfig = await getFormConfig("select", props.selectId); // 获取表单选项
    if (itemConfig.config && itemConfig.config.items) {
      tableData.value = itemConfig.config.items; // 保存在服务器的items是对象数组: { label: item }
    } else if (props.options) {
      tableData.value = props.options;
    }
  } else if (props.options) {
    tableData.value = props.options;
  }
  emits('uploadOptions', tableData.value);
});

// 添加选项
const addItem = () => {
  let item = { title: "", canEdit: false } as OptionType;
  tableData.value.push(item);
}

// 删除选项
const deleteItem = (row: any) => {
  tableData.value = tableData.value.filter((item) => item != row);
}

// 恢复默认值
const reset = () => {
  if (props.options) {
    tableData.value = props.options;
  } else {
    tableData.value = [];
  }
  emits('uploadOptions', tableData.value);
}

// 保存
const submitConfig = async () => {
  let input = { id: props.selectId, tag: 'select', config: { items: tableData.value } };
  await saveFormConfig(input as BasFormConfigOutput);
  showConfigDailog.value = false;

  emits('uploadOptions', tableData.value);
}

const show = () => {
  showConfigDailog.value = true
}

//父组件主动关闭, 确认关闭
const close = () => {
  showConfigDailog.value = false;
}

defineExpose({ show, close })
</script>